(function () {
    const oContainer = document.querySelector('.carousel')
    const oImgBox = oContainer.querySelector('.imgs')
    const oPrev = oContainer.querySelector('.prev')
    const oNext = oContainer.querySelector('.next')
    const aImgs = oContainer.querySelectorAll('.imgs-wrap')
    const moveTimes = aImgs.length - 3 // 能翻页的次数
    let currTime = 0

    changeBtn()

    oPrev.onclick = oNext.onclick = function () {
        if (this == oPrev) {
            if (currTime > 0) {
                currTime--
                changeImg()
            }
        } else {
            if (currTime < moveTimes) {
                currTime++
                changeImg()
            }
        }
        // console.log(currTime);

    }
    function changeImg() {
        oImgBox.style.left = -((aImgs[0].offsetWidth + 30) * currTime) + 'px'
        changeBtn()
    }
    function changeBtn() {
        if (currTime <= 0) {
            oPrev.classList.add('invalid')
        } else {
            oPrev.classList.remove('invalid')
        }

        if (currTime >= moveTimes) {
            oNext.classList.add('invalid')
        } else {
            oNext.classList.remove('invalid')
        }

    }

    let timer
    function go() {
        timer = setInterval(() => {
            if (currTime == moveTimes) {
                currTime = -1
            }
            oNext.onclick()
        }, 2000);
    }
    go()
    oContainer.onmouseover = function () {
        clearInterval(timer)
    }
    oContainer.onmouseout = function () {
        go()
    }

})()

